<template>
  <view class="category">
    <mySearch></mySearch>
    <view class="content">
      <view class="left-menus" @click="clickFn">
        <!-- @click="handleTab(index)" -->
        <view
          :data-index="index"
          :class="{ active: currentIndex == index }"
          v-for="(item, index) in menus"
          :key="item"
          >{{ item }}</view
        >
      </view>
      <view class="right-ground">
        <view v-for="item in goodsList" :key="item.cat_id">
          <view class="ground-title">/ {{ item.cat_name }} /</view>
          <view class="ground-content">
            <navigator
              class="goods"
              v-for="item1 in item.children"
              :key="item1.cat_id"
              :url="'/pages/goods_list/goods_list?id='+item1.cat_id"
            >
              <u-image width="120" height="120" :src="item1.cat_icon"></u-image>
              <view>{{ item1.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // categories: [], //数据量过大时，不是需要在页面渲染的数据，不应该写在data里。
      currentIndex: 0,
      menus: [],
      goodsList: [],
    };
  },
  onLoad() {
    const storageGoods = uni.getStorageSync("ugoGoods");
    if (storageGoods) {
      if (Date.now() - storageGoods.time > 1000 * 10) {
        console.log("过期了");
        this.categories = [];
        this.getCategories();
      } else {
        console.log("没过期");
        this.categories = storageGoods.data;
        this.menus = this.categories.map((item) => item.cat_name);
        this.goodsList = this.categories[this.currentIndex].children;
      }
    } else {
      console.log("没有缓存");
      this.categories = []; //直接在钩子里声明个全局变量，编译后不会出现在data里，可加速页面更新
      this.getCategories();
    }
  },
  methods: {
    //获取分类
    async getCategories() {
      const res = await this.$u.get("/categories");
      // console.log(res);
      this.categories = res.message;
      uni.setStorageSync("ugoGoods", {
        data: this.categories,
        time: Date.now(),
      });
      this.menus = this.categories.map((item) => item.cat_name);
      this.goodsList = this.categories[this.currentIndex].children;
    },
    //给每个menus绑定事件
    // handleTab(index) {
    //   this.currentIndex = index
    //   this.goodsList=this.categories[this.currentIndex].children
    // },

    //给menus父级绑定事件（事件委托）
    clickFn(e) {
      // console.log(e.target.dataset.index);
      this.currentIndex = e.target.dataset.index;
      this.goodsList = this.categories[this.currentIndex].children;
    },
  },
  // computed: {
  //   //获取左侧菜单
  //   menus() {
  //     return this.categories.map((item) => item.cat_name);
  //   },
  //   //获取右侧菜单
  //   goodsList() {
  //     if (this.categories.length == 0) return [];
  //     return this.categories[this.currentIndex].children;
  //   },
  // },
};
</script>
<style lang="scss" scoped>
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    display: flex;
    overflow: hidden;
    .left-menus {
      width: 182rpx;
      overflow: auto;
      view {
        height: 74rpx;
        line-height: 74rpx;
        text-align: center;
      }
      .active {
        color: $themeColor;
        border-left: 5rpx solid $themeColor;
      }
    }
    .right-ground {
      flex: 1;
      overflow: auto;
      padding: 0 20rpx;
      .ground-title {
        height: 74rpx;
        line-height: 74rpx;
        text-align: center;
      }
      .ground-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 5rpx;
        .goods {
          width: 33.33%;
          display: flex;
          flex-direction: column;
          justify-items: center;
          align-items: center;
          margin: 5rpx 0 ;
          view {
            padding: 10rpx 0;
          }
        }
      }
    }
  }
}
</style>